<template>
	<view>
		<u-navbar title="加入店铺" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<!-- <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line> -->
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
		</u-navbar>
		<view class="formbox">
			<u--form :model="form" ref="uForm" :errorType="['toast']" labelWidth="120">
				<u-form-item label="店铺编码" prop="storeNumber" borderBottom >
					<u-input border="none" v-model="form.storeNumber" disabledColor="#fff" disabled inputAlign="right" />
				</u-form-item>
				<u-form-item label="店铺名称" prop="storeName" borderBottom >
					<u-input border="none" v-model="form.storeName" disabledColor="#fff" disabled inputAlign="right" />
				</u-form-item>
				<u-form-item label="店铺联系人" prop="linkMan" borderBottom >
					<u-input border="none" v-model="form.linkMan" disabledColor="#fff" disabled inputAlign="right" />
				</u-form-item>
				<u-form-item label="联系电话" prop="mobile" borderBottom >
					<u-input border="none" v-model="form.mobile" disabledColor="#fff" disabled inputAlign="right"/>
				</u-form-item>
				<u-form-item label="投资人" prop="nickName" borderBottom >
					<u-input border="none" v-model="form.nickName" disabledColor="#fff" disabled inputAlign="right" />
				</u-form-item>
				<u-form-item label="投资人电话" prop="userMobile" borderBottom >
					<u-input border="none" v-model="form.userMobile" disabledColor="#fff" disabled inputAlign="right"/>
				</u-form-item>
				<u-form-item label="店铺总股金" prop="investAmount" borderBottom >
					<u-input border="none" v-model="form.investAmount" disabledColor="#fff" disabled inputAlign="right" />
					<text slot="right">元</text>
				</u-form-item>
				<u-form-item label="已投资金额" prop="investTotal" borderBottom >
					<u-input border="none" v-model="form.investTotal" disabledColor="#fff" inputAlign="right" disabled/>
					<text slot="right">元</text>
				</u-form-item>
				<u-form-item label="认购比例 %" prop="percentage" borderBottom >
					<u-number-box slot="right" step="10" min="10" :max="upperLimit" v-model="form.percentage" @change="onAmont"></u-number-box>
				</u-form-item>
				<u-form-item label="认购金额" prop="invest" borderBottom >
					<u-input border="none" v-model="form.invest" disabledColor="#fff" inputAlign="right" disabled/>
					<text slot="right">元</text>
				</u-form-item>
			</u--form>
			<view class="ubtn">
				<u-button type="error" @click="onSubmit" text="申请加入"></u-button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<!-- 登录提示 -->
		<coreshop-login-modal></coreshop-login-modal>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data(){
			return {
				upperLimit: 0,
				form: {
					invest: null,
					percentage: 10,
					storeNumber:'',
					linkMan:'',
					mobile:'',
					nickName:'',
					userMobile:'',
					investAmount:'',
					investTotal:''
				},
				user: {},
				rules: {
					invest: [{
						required: true,
						message: '请选择投资金额',
						trigger: ['blur', 'change']
					}],
				}
			}
		},
		onLoad(opt) {
			this.getStoreApplyInfo(opt.scene)
		},
		computed: {
			...mapState({
				hasLogin: state => state.hasLogin,
				userInfo: state => state.userInfo,
			})
		},
		watch: {
			userInfo(newVal){
				this.form.nickName = newVal.nickName
				this.form.userMobile = newVal.mobile
			}
		},
		methods: {
			onAmont(e){
				this.form.invest = (this.form.investAmount * e.value) / 100
			},
			getStoreApplyInfo(id){
				this.$u.api.GetStoreApplyInfo({id: id}).then(res=>{
					this.form = res.data.model
					this.form.nickName = res.data.user?res.data.user.nickName:''
					this.form.userMobile = res.data.user?res.data.user.mobile:''
					this.form.invest = (res.data.model.investAmount * 10) / 100
					this.upperLimit = ((res.data.model.investAmount - res.data.model.investTotal)/res.data.model.investAmount) * 100
					this.user = res.data.user
				})
			},
			onSubmit(){
				let that = this
				this.$u.api.DoStoreApplyDetail(this.form).then(res=>{
					if(res.status){
						that.$refs.uToast.show({
							message: res.msg,
							complete(){
								uni.switchTab({
									url: '/pages/index/member/member'
								})
							}
						})
					}else {
						that.$refs.uToast.show({
							message: res.msg,
							complete(){
								uni.switchTab({
									url: '/pages/index/reservation/reservation'
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.formbox {
		padding: 0 20rpx;
		background-color: #fff;
	}
	.ubtn {
		padding: 0 40rpx;
		margin-top: 40rpx;
	}
</style>